GreenSock

Does it solve it for you if you set immediateRender: false on the ScrollTrigger?: https://stackblitz.com/edit/stackblitz-starters-vynow2?file=src%2Fcomponents%2FHeroIntro%2FHeroIntro.js,src%2Fservices%2Fgsap.js

Hi @WEB1995. That's actually a super complex thing to try to do because you've got some wild variation in the direction and pacing of the line. At some points the line is going UP...but you're scrolling DOWN. And sometimes it's going directly horizontal (so no vertical movement at all), while the page is scrolling down. So logically, it's literally impossible to have it "centered" the whole time (if the page is moving down and the line is moving up, see the problem?). You can sort of approximate things with the magic of that pathEase() helper, but it'll never be perfect: https://codepen.io/GreenSock/pen/BaeaZqd?editors=1010 The only way to have it perfectly centered is to take an entirely different approach, like by putting everything in a container that you then translate it dynamically to keep it centered. That's not a super simple thing either, and it's well beyond the kind of help we can provide for free in these forums, but you can contact us for paid consulting services. I hope that helps!

That's just a CSS issue. There are many ways to set it up. Here are two: https://codepen.io/GreenSock/pen/rNgNwjr https://codepen.io/GreenSock/pen/zYQYzKm

There were quite a few problems with the logic in that demo. Lots of extra code too. Is this more like what you're trying to do?: https://stackblitz.com/edit/stackblitz-starters-bj9hsn?file=app%2Fpage.tsx

No, sorry.

Yeah, that sure looks like the problem is exactly what @GSAP Helper said it was. You can't scroll to non-whole numbers. It's not a limitation of GSAP - browsers just won't do that. Since you're using ScrollSmoother, you should be able to animate its scrollTop to the exact value you need: https://codepen.io/GreenSock/pen/LYoPejL?editors=0010 Is that any better?

I'm glad to hear you narrowed it down! No need to delete the post yet. If you're still running into any problems, I'd encourage you to make sure you're using the latest version of GSAP too. Good luck!

If the web site uses GSAP, and at least parts of that web site are behind a paywall, it would technically be appropriate to get the special commercial license. That being said, our entire business model relies on the honor system and being supported by customers who see the value in what we provide. So if you're not using GSAP in any areas of the site that are behind a paywall and you don't think the value GSAP delivers is worth the membership fee, we're totally fine with you not joining Club GSAP. We're passionate about having happy customers around here 🙂 I hope the tools serve you well!

Thanks for checking, @kch! Yes, since parts of the web site itself that uses GSAP will only be available to paying members, that would require the special commercial license that comes with the "Business" Club GSAP membership. Basically, if you answer "yes" to any of the following, you'd need that special commercial license: Do you have multiple developers that need access to the bonus plugins like SplitText, ScrollSmoother, MorphSVG, etc.? Does your GSAP-enhanced website/game/product require the user to pay a fee to use? (like Netflix.com) Are you selling a GSAP-enhanced product to multiple end users? (like a website template, theme or game) Are you using GSAP in a game/app with optional paid features/upgrades? If your website sells products that aren't GSAP-enhanced like clothing, widgets, food, etc., that doesn't require the commercial license. It only matters if the thing for which a fee is collected uses GSAP in some way. The standard "no charge" license even covers usage in projects where only a one-time development fee is charged, like an agency that's paid to build a fancy web site that's free for everyone to use. We like to think that a Club GSAP membership pays for itself very quickly when you consider all the time it’ll save, the added capabilities that the bonus plugins deliver...and of course that sense of having animation superpowers is priceless 🙂 Thanks again for asking about this. Let us know if you have any other questions.

MorphSVGPlugin is not in the public/free package - it's only for Club GSAP members ("Premium" and "Business"). You obviously have a Premium membership (thanks!) but you're importing the standard (free) "gsap" NPM package into your demo, so that won't have it. You can use the "gsap-trial" package instead. See https://gsap.com/trial Also, don't forget to register the useGSAP hook: gsap.registerPlugin(useGSAP, MorphSVGPlugin);

Hm, do you have a minimal demo that demonstrates the behavior that's confusing for you? If you're trying to seek backwards from slightly before the current position, you could do something like: tl.previousLabel(tl.time() - 0.01); // just subtract a little from the current time Does that help?

The only area I'm aware of that may not be "compatible" is that GSAP's standard "no charge" license allows all uses (even commercial ones) EXCEPT if a fee is being collected from MULTIPLE users. It covers usage in projects where only a one-time development fee is charged, like an agency that's paid to build a fancy web site that's free for everyone to use. That's totally fine. If your website sells products that aren't GSAP-enhanced like clothing, widgets, food, etc., that doesn't require the commercial license either. It only matters if the thing for which a fee is collected uses GSAP in some way, and only if it's from MULTIPLE users. Basically, if you answer yes to any of these questions, it'd require the special commercial license that comes with "Business" Club GSAP memberships: Do you have multiple developers that need access to the bonus plugins like SplitText, ScrollSmoother, MorphSVG, etc.? Does your GSAP-enhanced website/game/product require the user to pay a fee to use? (like Netflix.com) Are you selling a GSAP-enhanced product to multiple end users? (like a website template, theme or game) Are you using GSAP in a game/app with optional paid features/upgrades? GSAP doesn't require any attribution whatsoever. We'd consider it an honor if you use GSAP in your student project. That's totally fine with us. Just beware that the GSAP files would be subject to the standard "no charge" GreenSock license. Maybe you could simply make a note in your license document that indicates as much? Like "This project is released under Creative Commons Attribution 4.0 license, except the GSAP files which are subject to the license at https://gsap.com/standard-license" 🤷‍♂️

If I understand your goal correctly, that's just a CSS thing - for an element to have a stacking order like that, it must have position: relative (or something besides static). https://codepen.io/GreenSock/pen/BaEgEOB?editors=0110

There are a few helper functions that can save you from figuring out the math/logic: To find the scroll position of a particular element: https://gsap.com/docs/v3/HelperFunctions/helpers/getScrollLookup/ To find the scroll position of a particular animation: https://gsap.com/docs/v3/HelperFunctions/helpers/getScrollPosition If you want to scroll to the start of the 2nd animation, for example, you could do this: https://codepen.io/GreenSock/pen/vYMqVVL?editors=1010 function getScrollPosition(animation, progress) { let p = gsap.utils.clamp(0, 1, progress || 0), nested = !animation.scrollTrigger, st = nested ? animation.parent.scrollTrigger : animation.scrollTrigger, containerAnimation = st.vars.containerAnimation, range = st.end - st.start, position = st.start + range * p; if (containerAnimation) { st = containerAnimation.scrollTrigger; return (st.start + (st.end - st.start) * (position / containerAnimation.duration())); } else if (nested) { let start = st.start + (animation.startTime() / animation.parent.duration()) * range, end = st.start + ((animation.startTime() + animation.duration()) / animation.parent.duration()) * range; return start + (end - start) * p; } return position; }

That's because you're using xPercent which is based on the width of each element. For example, xPercent: 100 would be a different number of pixels for an element that's 200px wide vs. one that's 500px wide. I think you meant to do something more like this, right?: https://codepen.io/GreenSock/pen/abxgjrp?editors=0010 It just involved using pixels instead of percentages.